<template>
  <div class="app-container">
    <a-row style="margin-bottom: 16px">
      <a-col :span="4">
        <a-tree
          blockNode
          :data="treeData"
          :default-selected-keys="''"
          @select="handleCateChange"
        />
      </a-col>
      <a-col :span="20">
        <div class="query-area">
          <a-row>
            <a-col :span="18">
              <a-form
                :model="queryParams"
                ref="queryRef"
                layout="inline"
                class="query-form"
              >
                <a-form-item label="标题" field="title">
                  <a-input
                    v-model="queryParams.title"
                    placeholder="请输入标题"
                    allow-clear
                    style="width: 200px"
                    @keyup.enter="handleQuery"
                  />
                </a-form-item>
                <a-form-item>
                  <a-space>
                    <a-button type="primary" icon="Search" @click="handleQuery"
                      >搜索</a-button
                    >
                    <a-button @click="resetQuery">重置</a-button>
                  </a-space>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </div>

        <div class="table-area">
          <a-table
            class="custom-table"
            :loading="loading"
            :columns="columns"
            :data="comBusinessContentList"
            :row-selection="rowSelection"
            v-model:selected-keys="ids"
            row-key="contentId"
            @select="handleClickBox"
            :pagination="{
              total: total,
              current: queryParams.pageNum,
              pageSize: queryParams.pageSize,
              showJumper: true,
              showTotal: true,
              showPageSize: true,
              pageSizeOptions: [10, 20, 30, 50, 100, 200]
            }"
            @page-change="tablePageChange"
            @page-size-change="tablePageSizeChange"
          >
            <template #styleType="{ record }">
              <dict-tag
                :options="func_article_style"
                :value="record.styleType"
              />
            </template>
            <template #publishTime="{ record }">
              <span>{{ parseTime(record.publishTime, '{y}-{m}-{d}') }}</span>
            </template>
            <template #isShowPublishTime="{ record }">
              <dict-tag :options="is_show" :value="record.isShowPublishTime" />
            </template>
            <template #img="{ record }">
              <image-preview :src="record.img" :width="50" :height="50" />
            </template>
            <template #effectiveStatus="{ record }">
              <dict-tag
                :options="is_effective"
                :value="record.effectiveStatus"
              />
            </template>
            <template #createTime="{ record }">
              <span>{{ parseTime(record.createTime, '{y}-{m}-{d}') }}</span>
            </template>
            <template #optional="{ record }">
              <a-space>
                <a-button type="text" @click="handleUpdate(record)"
                  >编辑</a-button
                >
                <a-button
                  type="text"
                  :disabled="record.effectiveStatus == 1"
                  status="danger"
                  @click="handleDelete(record)"
                  >删除</a-button
                >
              </a-space>
            </template>
          </a-table>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup name="ComBusinessContent">
import { listComBusinessContentFunc } from '@/api/common/comBusinessContent'
import { allListComBusinessClassify } from '@/api/common/comBusinessClassify'
import { Modal, Message } from '@arco-design/web-vue'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const { is_show, publish_status, is_effective, func_article_style } =
  proxy.useDict(
    'is_show',
    'publish_status',
    'is_effective',
    'func_article_style'
  )
const queryRef = ref(null)
const comBusinessContentList = ref([])
const treeData = ref([])
const loading = ref(true)
const showMoreSearch = ref(false)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const functionCode = ref(route.query.functionCode)
const emit = defineEmits(['selectTableChange'])
const rowSelection = reactive({
  type: 'radio',
  showCheckedAll: true,
  onlyCurrent: true
})
const columns = ref([
  {
    title: '序号',
    render: (data) => data.rowIndex + 1 // 添加序号
  },
  {
    title: '标题',
    dataIndex: 'title'
  },
  // {
  //   title: '分类',
  //   dataIndex: 'classifyName'
  // },
  {
    title: '创建时间',
    slotName: 'createTime'
  },
  {
    title: '发布时间',
    slotName: 'publishTime'
  },

  {
    title: '创建人',
    dataIndex: 'createName'
  }
])

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: null,
    classifyId: null,
    effectiveStatus: 1,
    functionCode: functionCode.value
  }
})

const { queryParams } = toRefs(data)

watch(
  () => ids.value,
  () => {
    single.value = ids.value.length !== 1
    multiple.value = !ids.value.length
  }
)

/** 查询业务管理-内容发布列表 */
function getList() {
  loading.value = true
  listComBusinessContentFunc(queryParams.value).then((response) => {
    comBusinessContentList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields()
  handleQuery()
}

// 分页变化
function tablePageChange(pageNum) {
  queryParams.value.pageNum = pageNum
  getList()
}

// 每页数据数量
function tablePageSizeChange(pageSize) {
  queryParams.value.pageSize = pageSize
  handleQuery()
}

function handleClickBox(_, __, val) {
  console.log('选择的', val)
  // const val = {classifyName,functionCode,img,styleType,title,contentId,createTime,summarize} = record
  emit('selectTableChange', {
    ...val,
    ___type: 'article-func'
  })
}
function handleCateChange(val) {
  queryParams.value.classifyId = val[0]
  getList()
}
function getTypeList() {
  allListComBusinessClassify({ functionCode: functionCode.value }).then(
    (response) => {
      treeData.value = response.data.map((i) => ({
        title: i.classifyName,
        key: i.classifyId
      }))
      treeData.value.unshift({ title: '全部', key: '', children: [] })
    }
  )
}
getTypeList()

getList()
</script>
